<template>
  <div class="body-login">
    <el-form :module="loginForm" class="login-container">
      <h1>问政江西登录平台</h1>
      <el-form-item>
        <el-input
          type="input"
          placeholder="请输入用户名"
          v-model="loginForm.username"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          type="password"
          placeholder="请输入密码"
          v-model="loginForm.password"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-input
          type="input"
          placeholder="请输入右侧验证码"
          v-model="loginForm.yzm"
          :style="{ width: '50%', marginRight: '10px' }"
        />
        <img class="yzmImg" :src="yzmUrl" alt="" @click="refreshYzm" />
      </el-form-item> -->

      <el-form-item class="btn">
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue";
import { useAllDataStore } from "@/stores";
import { useRouter } from "vue-router";
import { login } from "@/api";
import { ElMessage } from "element-plus";

const loginForm = reactive({
  username: "",
  password: "",
  // yzm: "", // 添加验证码字段
});

const { proxy } = getCurrentInstance();
const store = useAllDataStore();

const router = useRouter();
const handleLogin = async () => {
  try {
    const { data } = await login(loginForm);
    if (data.code === 200) {
      ElMessage.success("登录成功");
      const token = data.data.data.access_token; // 你的接口返回结构是 { data: { access_token: ... } }
      store.updateMenuList(data.data.data.menuList);
      localStorage.setItem("userInfo", JSON.stringify(data.data.data.userInfo));
      const list = Object.entries(data.data.data.permissions).map(
        ([key, value]) => {
          return value;
        }
      );
      store.updatePermissionList(list);
      localStorage.setItem("token", token);
      const routerList = store.state.routerList;
      const routes = await store.updateMenuList(routerList);
      await store.setRoute(routes);

      router.push("/home");
    } else {
      // 处理非 200 的情况
      ElMessage.error(data.msg || "登录失败，请检查用户名或密码");
    }
  } catch (error) {
    // 捕获请求错误，比如服务器没有响应
    console.error("登录请求出错:", error);
    ElMessage.error("登录出错，请稍后再试");
  }
};

onMounted(() => {
  // getYzm();
});
// const yzmUrl = ref("");
// const getYzm = () => {
//   fetch("https://xychp.jxnews.com.cn:9906/api/Login/verify")
//     .then((response) => {
//       if (!response.ok) {
//         throw new Error("网络请求错误");
//       }
//       // console.log(response);

//       response.blob().then((blob) => {
//         let url = URL.createObjectURL(blob);
//         yzmUrl.value = url;
//       });
//     })
//     .catch((error) => {
//       return response.blob();
//     });
// };

// const refreshYzm = () => {
//   getYzm();
// };
</script>

<style scoped lang="less">
.body-login {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/background.png");
  background-size: 100%;
  overflow: hidden;
}

.login-container {
  width: 400px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 15px;
  padding: 35px 35px 15px 35px;
  box-shadow: 0 0 25px #cacaca;
  margin: 150px auto;

  h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #505450;
  }

  .yzmImg {
    height: 40px;
    width: 100px;
    border: 1px solid #cacaca;
    cursor: pointer;
    vertical-align: middle;
  }

  :deep(.btn .el-form-item__content) {
    justify-content: center;
  }
}
</style>
